<div style="position: relative;" class="dialog-mdsd-v">
    <h1 mat-dialog-title style="display:inline-block; cursor:move" mat-dialog-draggable>{{'dlg.layout-title' | translate}}</h1>
    <mat-icon (click)="onNoClick()" style="float:right;margin-right:-10px;margin-top:-10px;cursor:pointer;color:gray;">clear</mat-icon>
    <mat-tab-group style="width: 950px;height: 700px">
        <mat-tab label="{{'dlg.layout-general' | translate}}">
            <div style="display: block;">
                <div class="my-form-field" style="display: inline-block;margin-top: 25px;">
                    <span>{{'dlg.layout-lbl-sview' | translate}}</span>
                    <mat-select [(value)]="data.layout.start" style="width: 400px">
                        <mat-option *ngFor="let view of data.views" [value]="view.id">
                            {{ view.name }}
                        </mat-option>
                    </mat-select>
                </div>
                <div class="my-form-field" style="display: inline-block;margin-bottom: 25px;margin-left: 180px;">
                    <ngx-fab-button #fabmenu icon="menu" iconOpen="menu" color="rgba(68,138,255, 1)" style="color: rgba(255,255,255,1);background-color: rgba(68,138,255, 0);">
                    </ngx-fab-button>
                </div>
                <div class="my-form-field" style="display: inline-block;margin-bottom: 25px;margin-left: 60px;">
                    <span>{{'dlg.layout-show-dev' | translate}}</span>
                    <mat-slide-toggle color="primary" [(ngModel)]="data.layout.showdev"></mat-slide-toggle>
                </div>
            </div>
            <div style="display: block;">
                <div class="my-form-field" style="display: inline-block;margin-top: 5px;">
                    <span>{{'dlg.layout-lbl-zoom' | translate}}</span>
                    <mat-select [(value)]="data.layout.zoom" style="width: 400px">
                        <mat-option *ngFor="let type of zoomMode | enumToArray" [value]="type.key">
                            {{ type.value }}
                        </mat-option>
                    </mat-select>
                </div>
            </div>
        </mat-tab>
        <mat-tab label="{{'dlg.layout-navigation' | translate}}">
            <div style="display: inline-block;margin-top: 10px;width:100%; min-height: 500px; overflow-y: auto; height: 620px">
                <div [style.background-color]="data.layout.header.bkcolor" [style.color]="data.layout.header.fgcolor">
                    <button mat-icon-button>
                        <mat-icon aria-label="Menu">menu</mat-icon>
                    </button>
                    <div style="display: inline-block;padding-left: 140px">
                        <button mat-icon-button (click)="onAddMenuItem(null)">
                            <mat-icon aria-label="Add">control_point</mat-icon>
                        </button>
                    </div>
                </div>
                <div class="sidenav-menu" [style.background-color]="data.layout.navigation.bkcolor" [style.color]="data.layout.navigation.fgcolor"
                    style="height: calc(100% - 50px);" [ngClass]="'sidenav-menu-' + data.layout.navigation.type">
                    <mat-list class="dndList"
                        style="padding-top: 10px;">
                        <mat-list-item *ngFor="let item of draggableListLeft; let i = index"
                            [ngClass]="'menu-item-' + data.layout.navigation.type" [style.color]="data.layout.navigation.fgcolor">
                            <button type="button" mat-button class="sidenav-btn" [ngSwitch]="data.layout.navigation.type">
                                <!-- <mat-icon *ngIf="mode.value === navMode.icon || mode.value === navMode.block">{{item.icon}}</mat-icon> -->
                                <div *ngSwitchCase="'icon'" class="menu-item-content-icon">
                                    <mat-icon>{{item.icon}}</mat-icon>
                                </div>
                                <div *ngSwitchCase="'text'" class="menu-item-content-text">
                                    <span>{{item.text}}</span>
                                </div>
                                <div *ngSwitchCase="'block'" class="menu-item-content-block">
                                    <mat-icon style="display: block;">{{item.icon}}</mat-icon>
                                    <span>{{item.text}}</span>
                                </div>
                                <div *ngSwitchCase="'inline'" class="menu-item-content-inline">
                                    <mat-icon style="display: inline-block">{{item.icon}}</mat-icon>
                                    <span style="display: inline-block">{{item.text}}</span>
                                </div>
                            </button>
                            <div style="padding-left:15px;padding-top: 3px;color:black;display: block;width: 50px;">
                                <mat-icon (click)="onMoveMenuItem(i, 'top')"  class="layout-menu-item-icon" style="display: block;">arrow_upward</mat-icon>
                                <mat-icon (click)="onMoveMenuItem(i, 'bottom')" class="layout-menu-item-icon" style="display: block;">arrow_downward</mat-icon>
                            </div>
                            <div style="padding-left:15px; color:black">
                                <div style="display: block;width: 50px;">
                                    <mat-icon (click)="onAddMenuItem(item)" class="layout-menu-item-icon layout-menu-item-edit">edit</mat-icon>
                                    <mat-icon (click)="onRemoveMenuItem(i, item)" class="layout-menu-item-icon layout-menu-item-delete">clear</mat-icon>
                                </div>
                                <div class="layout-menu-item-link">{{getViewName(item)}}</div>
                            </div>
                        </mat-list-item>
                    </mat-list>
                </div>
                <div style="top: 70px; right: 10px;position: absolute;">
                    <div class="my-form-field" style="display: block;">
                        <span>{{'dlg.layout-lbl-smode' | translate}}</span>
                        <mat-select [(value)]="data.layout.navigation.mode" style="width: 300px">
                            <mat-option *ngFor="let mode of navMode | enumToArray" [value]="mode.key">
                                {{ mode.value }}
                            </mat-option>
                        </mat-select>
                    </div>
                    <div class="my-form-field" style="display: block; margin-top: 10px">
                        <span>{{'dlg.layout-lbl-type' | translate}}</span>
                        <mat-select [(value)]="data.layout.navigation.type" style="width: 300px">
                            <mat-option *ngFor="let type of navType | enumToArray" [value]="type.key">
                                {{ type.value }}
                            </mat-option>
                        </mat-select>
                    </div>
                    <div style="display: block; margin-top: 10px">
                        <div class="my-form-field" style="display: inline-block">
                            <span>{{'dlg.layout-nav-bkcolor' | translate}}</span>
                            <input [(colorPicker)]="data.layout.navigation.bkcolor" [style.background]="data.layout.navigation.bkcolor" [cpAlphaChannel]="'always'" class="input-color"
                                [cpPresetColors]="defaultColor" [cpOKButton]="true" [cpCancelButton]="true" [cpCancelButtonClass]="'cpCancelButtonClass'"
                                [cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" style="padding: 8px 0 0 0;width:126px;height:20px !important"
                                [cpPosition]="'bottom'"/>
                        </div>
                        <div class="my-form-field" style="float:right">
                            <span>{{'dlg.layout-nav-fgcolor' | translate}}</span>
                            <input [(colorPicker)]="data.layout.navigation.fgcolor" [style.background]="data.layout.navigation.fgcolor" [cpAlphaChannel]="'always'" class="input-color"
                                [cpPresetColors]="defaultColor" [cpOKButton]="true" [cpCancelButton]="true" [cpCancelButtonClass]="'cpCancelButtonClass'"
                                [cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" style="padding: 8px 0 0 0;width:126px;height:20px !important"
                                [cpPosition]="'bottom'"/>
                        </div>
                    </div>
                </div>                
            </div>
        </mat-tab>
        <mat-tab label="{{'dlg.layout-header' | translate}}">
            <div style="overflow-y: hidden; overflow-x: hidden; margin-top: 10px; min-height: 500px;">
                <div class="header-layout" [style.background-color]="data.layout.header.bkcolor" [style.color]="data.layout.header.fgcolor">
                    <div class="header-menu">
                        <button mat-icon-button>
                            <mat-icon aria-label="Menu">menu</mat-icon>
                        </button>
                    </div>
                    <div class="header-title">
                        {{data.layout.header.title}}
                    </div>
                    <div style="float: right; line-height: 46px;">
                        <button mat-icon-button class="header-login">
                            <mat-icon aria-label="Login">account_circle</mat-icon>
                        </button>
                    </div>
                    <div class="header-button">
                        <button mat-icon-button class="alarm-layout">
                            <mat-icon aria-label="Alarms">notifications_none</mat-icon>
                        </button>
                        <button mat-icon-button class="info-layout">
                            <mat-icon aria-label="Info">error_outline</mat-icon>
                        </button>
                    </div>
                </div>
                <div class="header-config">
                    <div class="config">
                        <div class="my-form-field" style="width: 300px">
                            <span>{{'dlg.layout-lbl-title' | translate}}</span>
                            <input [(ngModel)]="data.layout.header.title" type="text" style="width:293px">
                        </div>
                        <div style="display: block; margin-top: 20px;width: 300px">
                            <div class="my-form-field" style="display: inline-block">
                                <span>{{'dlg.layout-header-bkcolor' | translate}}</span>
                                <input [(colorPicker)]="data.layout.header.bkcolor" [style.background]="data.layout.header.bkcolor" [cpAlphaChannel]="'always'" class="input-color"
                                    [cpPresetColors]="defaultColor" [cpOKButton]="true" [cpCancelButton]="true" [cpCancelButtonClass]="'cpCancelButtonClass'"
                                    [cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" style="padding: 8px 0 0 0;width:126px;height:20px !important"
                                    [cpPosition]="'bottom'"/>
                            </div>
                            <div class="my-form-field" style="float: right;">
                                <span>{{'dlg.layout-header-fgcolor' | translate}}</span>
                                <input [(colorPicker)]="data.layout.header.fgcolor" [style.background]="data.layout.header.fgcolor" [cpAlphaChannel]="'always'" class="input-color"
                                    [cpPresetColors]="defaultColor" [cpOKButton]="true" [cpCancelButton]="true" [cpCancelButtonClass]="'cpCancelButtonClass'"
                                    [cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" style="padding: 8px 0 0 0;width:126px;height:20px !important"
                                    [cpPosition]="'bottom'"/>
                            </div>
                        </div>
                    </div>
                    <div class="config">
                        <div class="my-form-field">
                            <span>{{'dlg.layout-lbl-alarms' | translate}}</span>
                            <mat-select [(value)]="data.layout.header.alarms" style="width: 260px">
                                <mat-option *ngFor="let mode of notifyMode | enumToArray" [value]="mode.key">
                                    {{ mode.value }}
                                </mat-option>
                            </mat-select>
                            <mat-icon aria-label="Alarms">notifications_none</mat-icon>
                        </div>
                        <div class="my-form-field" style="margin-top: 20px;">
                            <span>{{'dlg.layout-lbl-infos' | translate}}</span>
                            <mat-select [(value)]="data.layout.header.infos" style="width: 260px">
                                <mat-option *ngFor="let mode of notifyMode | enumToArray" [value]="mode.key">
                                    {{ mode.value }}
                                </mat-option>
                            </mat-select>
                            <mat-icon aria-label="Info">error_outline</mat-icon>
                        </div>
                    </div>
                </div>
            </div>
        </mat-tab>
    </mat-tab-group>
    <div mat-dialog-actions class="dialog-action">
        <button mat-raised-button [mat-dialog-close]="">{{'dlg.cancel' | translate}}</button>
        <button mat-raised-button color="primary" (click)="onOkClick" [mat-dialog-close]="data" cdkFocusInitial>{{'dlg.ok' | translate}}</button>
    </div>
</div>